<template>
	<div class="nav" :style="{backgroundColor:bg_color,color:text_color}">
		<!-- 子向父组件传递参数通过事件 $emit  -->
		<div class="left" @click="$emit('left-click',$event)">
			<!-- 左插槽 -->
			<slot name="icon_left"></slot>{{left_text}}
		</div>
		<div class="title">
			<!-- {{a}} -->
			<slot name="title"></slot>{{title}}
		</div>
		<div class="right" @click="$emit('right-click',$event)">
			{{right_text}}
			<!-- 右插槽 -->
			<slot name="icon_right"></slot>
		</div>
		<!-- 在NavCom 里面访问 App.vue 两个组件是非父子关系，实现跨层级传参 （bus事件车）-->
		<!-- <p>来自app组件：{{myMsg}}</p> -->
		<!-- <p 
		:style="{'backgroundColor':myColor}" 
		@click="$parent.outNum++">访问父组件的outNum：{{$parent.outNum}}</p> -->
	</div>
</template>
<style lang="scss" scoped="scoped">
	.nav {
		height: .88rem;
		line-height: .88rem;
		display: flex;
		align-items: center;
		font-size: .2rem;

		.title {
			flex: 1;
			text-align: center;
		}

		.left,
		.right {
			padding: 0 .3rem;
		}

	}
</style>
<script>
	import bus from '@/utils/bus.js'
	export default {
		inject:["a"],
		created() {
			bus.$on("msgchange", $event => {
				console.log("msgchange")
				this.myMsg = $event;
			})
		},
		data() {
			return {
				myColor: "#f30",
				myMsg: '',
			}
		},
		props: {
			// 文本颜色
			text_color: {
				type: String,
				default: "#000"
			},
			// 背景颜色
			bg_color: {
				type: String,
				default: "#fff"
			},
			// 标题
			title: {
				type: String,
				default: ""
			},
			// 左边文本
			left_text: {
				type: String,
				default: "返回"
			},
			// 右边文本
			right_text: {
				type: String,
				default: ""
			}

		}
	}
</script>
